<template>
  <div class="container">
	  <a href="https://www.aliyun.com/minisite/goods?userCode=jvtn3p5i">
	  <img src="../public/阿里云推广.jpg" /></a>
    <p class="protocol"> 君子有九思：视思明，听思聪，色思温，貌思恭，言思忠，事思敬，疑思问，忿思难，见得思义。</p>
    <div class="desc-box">
      <div class="desc-name">
        <img src="../public/头像.jpg">
        <p>作者</p>
      </div>
      <div class="desc-text">
        <p><span>大名：</span>玄道</p>
        <p><span>公司：</span>聪联科技</p>
        <p><span>职业：</span>半吊子前端</p>
        <p><a href="https://gitee.com/fz818" target="_blank">Gitee</a><a  target="_blank"href="https://fz818.gitee.io/xuandao/">Blog</a></p>
      </div>
    </div>
  </div>
</template>
<style lang="stylus" scoped>
.container
  padding 40px 20px
  max-width 960px
  margin 0 auto 
  .protocol
    margin-bottom 40px
  .desc-box
    display flex
    align-items center
    padding 20px
    box-shadow 0 2px 6px 0 #e3e7f6
    border-radius 4px
    &:not(:last-child)
      margin-bottom 40px
    .desc-text
      p
       margin 5px
       a
        padding-right 10px
        margin-right 10px
        &:not(:last-child)
          border-right 1px solid #e5e5e5
    .desc-name
      width 100px
      margin-right 20px
      padding 20px
      text-align center
      border-right 1px solid #e4e4e4
      img
        width 40px
        height 40px
        border-radius 20px
      p
        margin 0
</style>
